<%@ page import="java.util.Date" %>
<%@ include file="../common/IncludeTop.jsp" %>
<style>
    li {
        width: 300px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #d8d8d8;
        margin-right: 2px;
        /*采用disolay:inline 和float:left均不能实现选项卡居中效果.只有display：inline—block可以*/
        display: inline-block;
    }
    ul {
        list-style: none;
        display: block;
    }
</style>
<div id="Catalog" >
    <form action="viewConfirmOrder" method="post">
          <ul >
            <li id="Payment"><a>PaymentDetails</a></li>
            <li id="Billing"><a>Billing Address</a></li>
            <li id="Shipping"><a>Shipping Address</a></li>
        </ul>
        <br>
        <div id="PaymentTable" style="display: block">
            <table>
                <tr>
                    <th colspan=2>Payment Details</th>
                </tr>
                <tr>
                    <td>Card Type:</td>
                    <td>
                        <select name="order.cardType">
                            <option name="Visa">Visa</option>
                            <option name="MasterCard">MasterCard</option>
                            <option name="American Express">American Express</option>
                        </select></td>
                </tr>
                <tr>
                    <td>Card Number:</td>
                    <td><input type="text" name="order.creditCard" value="${sessionScope.order.creditCard}">
                    </td>
                </tr>
                <tr>
                    <td>Expiry Date (MM/YYYY):</td>
                    <td>
                        <input type="text" name="order.expiryDate" value="${sessionScope.order.expiryDate}">
                    </td>
                </tr>
            </table>
        </div>

        <div id="BillingTable" style=" display: none">
            <table>
                <tr>
                    <th colspan=2>Billing Address</th>
                </tr>

                <tr>
                    <td>First name:</td>
                    <td><input type="text" name="order.billToFirstName" value="${sessionScope.loginUser.firstName}">
                    </td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input type="text" name="order.billToLastName" value="${sessionScope.loginUser.lastName}"></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><input type="text" size="40" name="order.billAddress1"
                               value="${sessionScope.loginUser.address1}"></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><input type="text" size="40" name="order.billAddress2"
                               value="${sessionScope.loginUser.address2}"></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><input type="text" name="order.billCity" value="${sessionScope.loginUser.city}"></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><input type="text" size="4" name="order.billState" value="${sessionScope.loginUser.state}"></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><input type="text" size="10" name="order.billZip" value="${sessionScope.loginUser.zip}"></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><input type="text" size="15" name="order.billCountry" value="${sessionScope.loginUser.country}">
                    </td>
                </tr>
            </table>
        </div>
        <div id="ShippingTable" style="display: none">
            <table>
                <tr>
                    <th colspan=2>Shipping Address</th>
                </tr>

                <tr>
                    <td>First name:</td>
                    <td><input type="text" name="order.shipToFirstName" value="${sessionScope.loginUser.firstName}"/>
                    </td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input type="text" name="order.shipToLastName" value="${sessionScope.loginUser.lastName}"/></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><input type="text" size="40" name="order.shipAddress1"
                               value="${sessionScope.loginUser.address1}"/></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><input type="text" size="40" name="order.shipAddress2"
                               value="${sessionScope.loginUser.address2}"/></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><input type="text" name="order.shipCity" value="${sessionScope.loginUser.city}"/></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><input type="text" size="4" name="order.shipState" value="${sessionScope.loginUser.state}"/>
                    </td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><input type="text" size="10" name="order.shipZip" value="${sessionScope.loginUser.zip}"/></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><input type="text" size="15" name="order.shipCountry"
                               value="${sessionScope.loginUser.country}"/></td>
                </tr>
            </table>
        </div>
        </table>
        <script>
            $('#Payment').on('click', function () {
                $('#PaymentTable').css("display", "block");
                $('#BillingTable').css("display", "none");
                $('#ShippingTable').css("display", "none");
            });
            $('#Billing').on('click', function () {
                $('#PaymentTable').css("display", "none");
                $('#BillingTable').css("display", "block");
                $('#ShippingTable').css("display", "none");
            });
            $('#Shipping').on('click', function () {
                $('#PaymentTable').css("display", "none");
                $('#BillingTable').css("display", "none");
                $('#ShippingTable').css("display", "block");
            });
        </script>

        <input type="submit" name="newOrder" value="Continue">

    </form>
</div>

<%@ include file="../common/IncludeBottom.jsp" %>